<script setup>
import Table from '@/components/table/index.vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getListByPageAPI, delAPI, getByIdAPI } from '@/api/wedding/serviceInfo';
import serviceInfoLayer from './layer.vue';
import { dicVals } from '@/api/common';



import { getUserStore } from '@/store';

/************************************定义变量************************************************/
//表格数据
const tableData = ref([]);
//表格loading
const loading = ref(false);
//选中的数据
const chooseData = ref([]);

//当前用户信息
const currentUser = ref(null);

const userStore1 = getUserStore();

const merchantType = ref('');



//表格选中数据事件
const handleSelectionChange = (val) => {
  chooseData.value = val;
};
// 弹窗控制器
const layer = reactive({
  show: false,
  title: '新增',
  showButton: true,
});
// 存储搜索用的数据
const query = reactive({
  params: '',
});
// 分页参数, 供table使用
const page = reactive({
  index: 1,
  size: 20,
  total: 1,
});

/************************************定义弹窗************************************************/
// 新增弹窗功能
const handleAdd = () => {
  layer.title = '新增数据';
  console.log('layer', currentUser.value.meUrl);
  // 判断当前用户的头像和主图是否上传，没有传提示
  if (!currentUser.value.meUrl || !currentUser.value.iconUrl) {
    ElMessage({
      type: 'success',
      message: '请前往右上角个人中心上传商家头像和商家主图',
    });
  }else{
    layer.show = true;
  }
  delete layer.row;
};
// 编辑弹窗功能
const handleEdit = (row) => {
  layer.title = '编辑数据';
  getByIdAPI(row.id).then((res) => {
    layer.row = res.data;
    layer.show = true;
  });
};

/************************************定义事件************************************************/
// 批量删除功能
const handleDel = (data) => {
  let params = data.map((e) => {
    return e.id;
  });
  delAPI(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    });
    getTableData(true);
  });
};
// 搜索功能
const getTableData = (init) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    current: page.index,
    pageSize: page.size,
    ...query,
  };
  getListByPageAPI(params)
    .then((res) => {
      tableData.value = res.data.list;
      page.total = Number(res.data.total);
    })
    .catch((error) => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 字典初始化start
const busTypes = ref({});
const initDicts = async () => {
  const res = await dicVals('bus_type');
  res.data.forEach((row) => {
    // if(merchantType.value ){
    //   console.log(row.value +"=========="+merchantType.value)
    //   if(row.value === merchantType.value){
    //     busTypes.value[row.value] = row.label;
    //   }
    // }else{
      busTypes.value[row.value] = row.label;
    //}
  });

};

// 字典初始化end

/************************************生命周期************************************************/
//获取表格数据
onMounted(async () => {

  currentUser.value = userStore1.curUser;
     merchantType.value  = userStore1.curUser.merchantType;
     console.log('merchantType', merchantType.value);
  // vue的api
  await initDicts();
  // 在组件挂载后执行的代码
  getTableData(true);

});
</script>

<template>
  <div class="layout-container">
    <div class="layout-container-form">
      <div class="layout-container-form-search">
        <el-form-item label="关键词：">
          <el-input v-model="query.searchValue" />
        </el-form-item>
        <el-button type="primary" icon="Search" class="search-btn" @click="getTableData(true)">搜索</el-button>
      </div>

      <div class="layout-container-form-handle">
        <el-button type="primary" icon="CirclePlus" @click="handleAdd">新增</el-button>
        <el-popconfirm title="批量删除" @confirm="handleDel(chooseData)">
          <template #reference>
            <el-button type="danger" icon="Delete" :disabled="chooseData.length === 0">批量删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div class="layout-container-table">
      <Table ref="table" v-model:page="page" v-loading="loading" :showIndex="true" :showSelection="true"
        :data="tableData" @getTableData="getTableData" @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="服务名称" align="center" />
        <el-table-column prop="type" label="服务类型" align="center">
          <template #default="scope">
            <t-tag theme="primary" size="small" variant="light" :style="{ margin: '3px' }">
              {{ busTypes[scope.row.type] }}
            </t-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="价格" align="center" />
        <!-- <el-table-column prop="overview" label="服务概述" align="center" /> -->
        <!-- <el-table-column prop="details" label="服务详情" align="center" /> -->
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column prop="formatName" label="服务款式/风格/规格" align="center" />
        <el-table-column prop="leadCar" label="婚车头车" align="center" />
        <el-table-column prop="followCar" label="婚车跟车" align="center" />
        <el-table-column prop="isDeposit" label="付款方式" align="center">
          <template #default="scope">
            <span v-if="scope.row.isDeposit === '0'">定金</span>
            <span v-else>全款</span>
          </template>
        </el-table-column>
        <!--操作按钮-->
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="删除" @confirm="handleDel([scope.row])">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
    </div>

    <serviceInfoLayer :layer="layer" @getTableData="getTableData" v-if="layer.show" />
  </div>
</template>

<style lang="scss" scoped></style>
